<template>
  <div class="file-container">
    <!--
+         action	必选参数，上传的地址
         headers	设置上传的请求头部

         multiple 是否多选
         data	上传时附带的额外参数
         name	上传的文件字段名

+         show-file-list	是否显示已上传文件列表
+        drag	是否启用拖拽上传

         accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效

         on-preview	点击文件列表中已上传的文件时的钩子	function(file)
         on-remove	文件列表移除文件时的钩子	function(file, fileList)
         on-success	文件上传成功时的钩子	function(response, file, fileList)
         on-error	文件上传失败时的钩子	function(err, file, fileList)
         on-progress	文件上传时的钩子	function(event, file, fileList)
         on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)
         before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)
         before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。	function(file, fileList)

+         list-type	文件列表的类型	string	text/picture/picture-card	text
+         auto-upload	是否在选取文件后立即进行上传	boolean
         disabled	是否禁用
         limit	最大允许上传个数
         on-exceed	文件超出个数限制时的钩子	function(files, fileList)
       -->

    <el-upload
        ref="upload"
        multiple
        drag
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :show-file-list="true"
        :limit="limitCount"

        :file-list="myFileList"
        :on-preview="onPreview"
        :on-remove="onRemove"
        :on-change="onChange"
        :on-exceed="onExceed">
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog :visible.sync="dialogFlag">
      <img width="100%" :src="imgUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>
/**
 * 使用方式
 * import CommonFile from "@/views/common/CommonFile"
 * components: {File},
 *
 * <CommonFile :limit="上传最大个数" :fileList="fileList" @my-event-fileList="getFileList"></CommonFile>
 * fileList:[
 *  {
 *    "name":"1258315398324031488.png",
 *    "size:"87698",
 *    "status":"ready",
 *    "uid":"1635241642656",
 *    "url":"blob:http://localhost:8081/3707c0c4-1e72-4411-ac19-4fe9c4bc86ea",
 *  }
 * ]
 */
export default {
  //组件名称
  name: "CommonFile",
  props: {
    "limit": Number,
    "fileList": Array,
  },
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      limitCount: 1,    //没有设置上传文件个数，默认1个
      upload: Object,   //上传框
      myFileList: [],   // 自身文件列表

      dialogImageUrl: '',
      dialogVisible: false,
      dialogFlag: false, //展示图片
      imgUrl: "",        //图片链接
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {
    fileList: function (newValue, oldValue) {
      this.myFileList = newValue
    }
  },
  //方法
  methods: {
    //状态改变
    onChange(file, fileList) {
      // this.myFileList = fileList

      //上传
      let formData = new FormData();
      formData.append("file", file.raw);

      this.axios.post(`/file/file/file`, formData)
          .then((data) => {
            let fileId = data.data
            this.axios.get(`/file/fileInfo/file/${data.data}`)
                .then((data) => {
                  let pic = {
                    "url":data.data.url
                  }
                  this.myFileList.push(pic)
                  this.$emit("my-event-fileList", this.myFileList)
                })
          })
      return false;
    },
    //个数超出
    onExceed(files, fileList) {
      this.$Message.error(`当前文件最多只能上传${this.limitCount}个`);
    },
    //移除文件
    onRemove(file, fileList) {
      this.myFileList = fileList
      this.$emit("my-event-fileList", this.myFileList)
    },
    //点击某个文件
    onPreview(file) {
      this.dialogFlag = true;
      this.imgUrl = file.url;
    }
  },
  //钩子函数
  mounted() {
    /**
     * 设置最大上传个数
     * <CommonFile  :limit="1"></CommonFile>
     * 如果没有设置 limit,那么 props 中 limit = undefined
     * 如果设置了 limit,那么 props 中 limit != undefined,赋值给 limitCount
     */
    if (typeof (this.limit) != 'undefined') {
      this.limitCount = this.limit;
    }
    //同理设置文件列表
    if (typeof (this.fileList) != 'undefined') {
      this.myFileList = this.fileList;
    }

    /**
     * 获取上传的组件框
     * @type {Element}
     */
    let upload = this.$refs.upload.$children[1].$el;
    this.upload = upload;

    /**
     * 定时查看 fileList
     */
    setInterval(() => {
      let fileListCount = this.myFileList.length;
      if (fileListCount >= this.limitCount) {
        this.upload.style.width = '0px';
        this.upload.style.height = '0px';
        this.upload.style.overflow = 'hidden';
      } else {
        this.upload.style.width = '148px';
        this.upload.style.height = '148px';
      }
    }, 800)
    window.onload = function () {

    }
  }
}
</script>

<style lang="less" scoped>
.file-container {
}

/deep/ .el-upload--picture-card {
  background-color: #FFF;
  border: 1px dashed #FFF;
}

/deep/ .el-upload--picture-card:hover, .el-upload:focus {
  border-color: #FFF;
  color: #FFF;
}

/deep/ .el-upload-dragger:hover, .el-upload-dragger:focus {
  border-color: #409EFF;
  color: #409EFF;
}

/deep/ .el-upload-dragger {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  line-height: 146px;
  vertical-align: top;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: 0;
}
</style>